<template>
  <a-card title="页面管理" :bordered="false">
    <a-form-model
      ref="form"
      :model="model"
      :rules="rules"
      :label-col="FORM_LAYOUT.labelCol"
      :wrapper-col="FORM_LAYOUT.wrapperCol">
      <a-row class="form-row" :gutter="16">
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="标题" prop="title">
            <a-input v-model="model.title"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item prop="slug">
            <span slot="label">
              别名
              <a-tooltip title="页面访问地址的一部分，如/page/xxx.html">
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>

            <a-input v-model="model.slug"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item prop="template">
            <span slot="label">
              模板
              <a-tooltip title="填写主题page文件夹下文件名称">
                <a-icon type="question-circle-o" />
              </a-tooltip>
            </span>

            <a-input v-model="model.template"/>
          </a-form-model-item>
        </a-col>
        <a-col :lg="12" :sm="24">
          <a-form-model-item label="状态" prop="status">
            <e-dict-radio type="commonStatus" v-model="model.status"/>
          </a-form-model-item>
        </a-col>

        <a-col :sm="24">
          <div class="input-btn-group">
            <e-btn-save permissions="cms:page:save" :loading="saveLoading" :click-callback="save"/>
          </div>
        </a-col>
      </a-row>
    </a-form-model>
  </a-card>
</template>

<script>
import { FORM_LAYOUT } from '@/utils/const/form'
import { get, save, add } from '@/api/cms/page'
import { saveSuccessTip } from '@/utils/tips'
import { isNotBlank } from '@/utils/util'
import EBtnSave from '@/components/Easy/general/BtnSave'
import EDictSelect from '@/components/Easy/data-entry/DictSelect'
import EDictRadio from '@/components/Easy/data-entry/DictRadio'

export default {
  name: 'CmsPageInput',
  components: {
    EDictRadio,
    EBtnSave,
    EDictSelect
  },
  data () {
    return {
      id: this.$route.query.id,

      FORM_LAYOUT: FORM_LAYOUT,

      // 表单
      saveLoading: false,
      model: { },
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { max: 32, message: '标题不能超过32个字符', trigger: 'blur' }
        ],
        slug: [
          { required: true, message: '请输入别名', trigger: 'blur' },
          { max: 32, message: '别名不能超过32个字符', trigger: 'blur' }
        ],
        template: [
          { required: true, message: '请输入模板', trigger: 'blur' },
          { max: 128, message: '模板不能超过128个字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择状态', trigger: 'change' }
        ]
      }
    }
  },
  mounted () {
    if (isNotBlank(this.id)) {
      this.edit(this.id)
    } else {
      this.add()
    }
  },
  methods: {
    edit (id) {
      get(id).then((res) => {
        this.model = res.data
      })
    },
    add () {
      add().then((res) => {
        this.model = res.data
      })
    },
    save () {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.saveLoading = true
          save(this.model).then((res) => {
            this.saveLoading = false
            saveSuccessTip()
            this.model = res.data
          }).catch(({ response }) => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
